<template lang="html">
	<div class="Sellout buyWarp">
		<el-form ref="form" :model="form" size="small">
			<el-form-item :label="$t('bibi.buy[0]')">
				<el-input v-if="ModifyState" :value="$t('bibi.buy[1]')" :disabled="ModifyState"></el-input>
				<el-input v-else v-model="sendData.newprice" :disabled="ModifyState"></el-input>
			</el-form-item>
			<el-form-item :label="$t('bibi.buy[2]')">
				<el-input v-model="sendData.buynum">
					<template slot="append" v-if="ModifyState" >USDT</template>
					<template slot="append" v-else >{{Data.code | normal }}</template>
				</el-input>
				<div class="number" v-if="isLogin && form.maximum>=0">
					<el-slider v-model="sendData.buynum" :min="0" :max="form.maximum" :step="0.0001" :show-tooltip="false"></el-slider>
					
					<span class="MaxLen" v-if="ModifyState" >{{form.maximum}} USDT</span>
					<span class="MaxLen" v-else >{{form.maximum}} {{Data.code | normal}}</span>
				</div>
				<div class="number" v-else>
					<el-slider v-model="sendData.buynum" :min="0" :max="form.maximum" :step="0.0001" :show-tooltip="false" disabled></el-slider>
					<span class="MaxLen">0 BTC</span>
				</div>
			</el-form-item>
			<div class="jiaoyiAll">
				<el-form-item :label="$t('bibi.buy[3]')">
					<p  v-if="isLogin">{{form.turnover}} <span>USDT</span></p>
					<p v-else> 0 <span>USDT</span></p>
					
				</el-form-item>
			</div>
			<el-form-item>
				<el-button v-if='isLogin' type="" size="small" :loading="loadingsellout" @click="onSubmit">{{$t('bibi.buy[4]')}}{{Data.code | normal }}</el-button>
				<el-button v-else type="" size="small" :loading="loadingsellout" @click="onSubmit" disabled>{{$t('bibi.buy[5]')}}</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
		props: ['Data', 'ModifyState'],
		data() {
			return {
				dialogFormVisible: true,
				activeName: 'first',
				form: {
					maximum: 100, //交易最大数量
					turnover: "", //交易额
				},
				//需要向后台传的数据
				sendData: {
					mobile: null, //手机号
					code: '', //code
					newprice: '', //最新价格 
					buynum: 0, //买入数量
					otype: 2, //市价 2 限价 1 （默认市价）
					type: 1, //涨（买入） 1 跌 2（卖出）
					
				},
				loadingsellout: false, //防止重复提交
				isLogin: false, //判断有没有登录
				
			}
		},
		watch: {
			'Data.code': function(val, oval) {
				this.sendData.newprice = this.Data.PriceData;
				this.sendData.buynum = 0;
				
			},
			'Data.PriceData': function(val, oval) {
				var _this = this;
				if(_this.ModifyState) {
					_this.sendData.newprice = val;
				}
				//点击卖5买5
				if(this.Data.buyorsell == 'buy') {
					_this.sendData.newprice = val;
				}
				_this.sendData.code = _this.Data.code; //code 
				this.maxCanBuy();
			},
			'Data.wallone': function(val, oval) {
				this.maxCanBuy();
				this.allMoney();
			},
			
			'sendData.newprice': function(val, oval) {
				//从新计算最大购买量和交易额
				if(!this.isLogin) return false;
				this.maxCanBuy();
				this.allMoney();

			},
			'sendData.buynum': function(val, oval) {
				//从新计算最大购买量和交易额
				if(!this.isLogin) return false;
				this.sendData.buynum = Number(val);
				this.maxCanBuy();
				this.allMoney();
			},
		},
		//过滤器
		filters: {
			normal: function(val) {
				var n = val.indexOf('_');
				if(n == -1) return '--'
				return val.toUpperCase().slice(0, n);
			}
		},
		methods: {
			/*
				 注意 ：市价 买入的时候 不知道当前的价格   是以USDT交易 滑竿和输入框显示的是USDT的数量  判断 字段 (ModifyState) true 市价  false 限价
			 * */
			
			//最大购买量
			maxCanBuy() {
				var canUser = Number(Number(this.Data.wallone/(1 + this.Data.trans_fee)).toFixed(4))
				if(this.ModifyState){
					//说明是市价 买入 
					this.form.maximum =  canUser ;
					return false
				}
				var num = Number(canUser/ this.sendData.newprice);
				this.form.maximum = Number(num.toFixed(4));
			},
			//最总交易额
			allMoney() {				
				if(this.ModifyState){
					this.form.turnover = Number( Number(this.sendData.buynum  *  (1+ this.Data.trans_fee) ).toFixed(4) );
					return false
				}
				
				// 数量 * 单价/(1 + 手续费)
				this.form.turnover =  Number(( ( this.sendData.newprice * this.sendData.buynum)  *  (1+ this.Data.trans_fee) ).toFixed(4));
			},
			onSubmit: function() { //订单
				var _this = this;
				var dis = null;
				//				_this.loadingsellout = true;
				if(_this.ModifyState) {
					_this.sendData.otype = 2;
					dis = _this.$t("bibi.alse[0]");

				} else if(!_this.ModifyState) {
					_this.sendData.otype = 1;
					dis = _this.$t("bibi.alse[1]");
				}
				_this.sendData.mobile = sessionStorage.mobile; //手机号
				
				if(_this.ModifyState){
					//市价  委托总金额  委托总数量 
					_this.sendData.newprice = _this.$t("bibi.alse[2]");
					var sendData = {
						mobile:sessionStorage.mobile,
						code:_this.sendData.code,
						toalprice:_this.sendData.buynum,  //委托总金额 (市价买入)
						type:_this.sendData.type, //1买入 2卖出 
						otype:_this.sendData.otype, //1限价 2市价 
					}
					
				}else{
					//委托价格 委托数量 
					var sendData = {
						mobile:sessionStorage.mobile,
						code:_this.sendData.code,
						buyprice:_this.sendData.newprice,  //委托价格
						buynum:_this.sendData.buynum, //委托数量
						type:_this.sendData.type, //1买入 2卖出 
						otype:_this.sendData.otype, //1限价 2市价 
					}
					
				}
				
				if(!_this.$public.dataDetection(sendData, _this.Data.wallone, _this)) {
					return false
				}
				const h = this.$createElement;
				this.$msgbox({
					title: _this.$t("bibi.alse[3]"),
					message: h('div', {
						style: 'width: 60%;margin:0 auto'
					}, [

						h('div', {
							style: 'overflow: hidden'
						}, [
							h('p', {
								style: 'float:left'
							}, [
								h('span', null, _this.$t("bibi.alse[4]")+'：'),
								h('span', {
									style: 'color:#e66b41'
								}, _this.$t("bibi.alse[13]")),
							]),
							
							h('p', {
								style: 'float:right'
							}, [
								h('span', null, _this.$t("bibi.alse[6]")+'：'),
								h('span', null, dis),
							])
							
						]),
						h('div', {
							style: 'overflow: hidden'
						}, [
							h('p', {
								style: 'float:left'
							}, [
								h('span', null, _this.$t("bibi.alse[7]")+'：'),
								h('span', null, _this.sendData.newprice),
							]),
							h('p', {
								style: 'float:right'
							}, [
								h('span', null, _this.$t("bibi.alse[8]")+'：'),
								h('span', null, _this.sendData.buynum),
							])
						]),
						

					]),
					showCancelButton: true,
					confirmButtonText: _this.$t("bibi.alse[9]"),
					cancelButtonText: _this.$t("bibi.alse[10]"),
					beforeClose: (action, instance, done) => {
						if(action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = _this.$t("bibi.alse[11]");
							//数据请求 开始下单
							done();
							
							_this.$http.post(_this.$http.bbtran,sendData).then(function(response) {
//								done();
								instance.confirmButtonLoading = false;
								if(response.data.status == "200") {
									_this.$public.msg(_this.$t("bibi.alse[12]"), 'success', _this);
									_this.sendData.buynum = 0;
									_this.maxCanBuy();
									_this.allMoney();
									_this.$emit('changeData');
								} else {
									_this.$public.msg(response.data.msg, 'warning', _this);
								}
							}).catch(function(error) {});

						} else {
							done();
						}
					}
				}).then(action => {});

			},
		},
		// 路由改变时
		beforeRouteLeave(to, from, next) {},
		mounted: function() {
			var _this = this;
			
//			_this.userInfo();
			if(sessionStorage.account){
				//表示已经登录了
				_this.isLogin = true;
			}
			
			_this.sendData.code = _this.Data.code; //code
			setTimeout(function() {
				_this.sendData.newprice = _this.Data.PriceData; //最新价格
				_this.maxCanBuy();
				_this.allMoney();
			}, 1500)
		},
		components: {}
	}
</script>
<style>

</style>